<template>
    <div class="list-box">
        <div class="pannel-title pannel-between">
            <div>资源连接分类列表</div>
            <a-button class="pannel-btn" size="small" type="primary" shape="round" @click="addToolType()">
                <PlusCircleFilled />
                新增资源连接分类
            </a-button>
        </div>
        <div class="line"></div>
        <div class="data-table">
            <a-table
                :columns="columns"
                :row-key="(record) => record.id"
                :data-source="dataSource"
                :pagination="pagination"
                :loading="isLoading"
                @change="handleTableChange"
            >
                <template #action="{record}">
                    <a @click="editToolType(record)" title="编辑" style="margin-right:5px;"><img src="@/assets/images/cz-edit.png"/></a>
                    <a @click="deleteToolType(record)" title="删除"><img src="@/assets/images/cz-delete.png"/></a>
                </template>
            </a-table>
            <a-modal v-model:visible="visible" :maskClosable="false" :afterClose="closeModal">
                <h3 class="modal-title">{{ formState.id ? "修改" : "新增" }}</h3>
                <div class="modal-form">
                    <a-form ref="form1" :model="formState" :rules="rules" :labelCol="{span:9,offset:0}">
                        <a-form-item label="资源连接分类名称" name="name">
                            <a-input
                                v-model:value="formState.name"
                                placeholder="请输入资源连接分类名称"
                            />
                        </a-form-item>
                        <a-form-item label="排序序号" name="displayPriority">
                            <a-input
                                v-model:value="formState.displayPriority"
                                placeholder="请输入大于等于0的正整数"
                            >
                                <template #suffix>
                                    <a-tooltip title="排序序号数值越小越靠前">
                                        <info-circle-outlined style="color: rgba(255, 0, 0, 0.7)" />
                                    </a-tooltip>
                                </template>
                            </a-input>
                        </a-form-item>
                    </a-form>
                </div>
                <template #footer>
                    <div class="modal-btn">
                        <a-button type="default" shape="round" @click="closeModal()">取消</a-button>
                        <a-button :loading="btnLoading" type="primary" shape="round" @click="confirm()">确定</a-button>
                    </div>
                </template>
            </a-modal>
        </div>
    </div>
</template>
<script>
import { PlusCircleFilled, InfoCircleOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import { message, Table, Modal,Button,Form,Input ,Tooltip} from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
export default {
    components: {
        PlusCircleFilled,
        InfoCircleOutlined,
        ATable: Table,
		AModal:Modal,
		AButton:Button,
		AForm:Form,
		AFormItem:Form.Item,
		AInput:Input,
		ATooltip:Tooltip
    },
    setup() {
        const store = useStore();
        //text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
        store.dispatch("setBreadcrumb", {
            text: "资源连接 / 资源连接分类管理",
            isBack: false,
        });
        const formState = ref({
            id:"",
            name:"",
            displayPriority:"",
        });
        const dataSource = ref([]);
        const columns = reactive([
            {
                title: "资源连接分类名称",
                dataIndex: "name",
                key: "name",
            },
            {
                title: "排序序号",
                dataIndex: "display_priority",
                key: "display_priority",
            },
            {
                title: "创建时间",
                dataIndex: "create_time",
                key: "create_time",
            },
            {
                title: "操作",
                key: "action",
                slots: { customRender: "action" },
            },
        ]);
        const pagination = reactive({
            current: 1,
            pageSize: 10,
            total: 0,
        });
        return {
            dataSource,
            columns,
            pagination,
            formState,
            isLoading: ref(false),
            visible: ref(false),
			btnLoading:ref(false)
        };
    },
    data() {
        return {
            rules: {
                name: {
                    required: true,
                    message: "不能为空",
                    trigger: "blur",
                },
                displayPriority: [
                    {
                        required: true,
                        message: "不能为空",
                        trigger: "blur",
                    },
                    {
                        trigger: "blur",
						message: "请输入大于等于0的整数",
						pattern:/^(0|[1-9]\d*)$/,
                    },
                ],
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.isLoading = true;
            httpRequest
                .post("获取资源连接分类列表", { page: this.pagination.current ,pageSize:this.pagination.pageSize})
                .then((res) => {
                    this.dataSource = res.data.data;
                    this.pagination.total = res.data.total;
                })
                .finally(() => {
                    this.isLoading = false;
                });
        },
        handleTableChange(page) {
            this.pagination.current = page.current;
            this.getList();
        },
        deleteToolType(item) {
            Modal.confirm({
                title: "系统提示",
                content: "确认删除当前资源连接分类？",
                okText: "确认",
                cancelText: "取消",
                onOk: () => {
                    return new Promise((res) => {
                        httpRequest
                            .post("删除资源连接分类", { id: item.id })
                            .then(() => {
                                message.success("删除资源连接分类成功");
                                this.getList();
                            })
                            .catch(() => {
                                message.warning({ content: "资源连接分类删除失败", key: "error" });
                            })
                            .finally(() => {
                                this.isLoading = false;
                                res();
                            });
                    });
                },
            });
        },
        editToolType(item) {
			if(this.$refs.form1&&this.$refs.form1.resetFields){
				this.$refs.form1.resetFields();
			}
            this.formState.id = item.id;
            this.formState.name = item.name;
            this.formState.displayPriority = String(item.display_priority);
            this.visible = true;
        },
        addToolType() {
			if(this.$refs.form1&&this.$refs.form1.resetFields){
				this.$refs.form1.resetFields();
			}
			this.formState = {
				id:"",
				name:"",
				displayPriority:"",
			}
            this.visible = true;
        },
        confirm() {
			
            this.$refs.form1.validate().then(()=>{
				this.btnLoading = true;
                const url = this.formState.id ? "编辑资源连接分类" : "创建资源连接分类";
                const msg = this.formState.id ? "修改成功" : "创建成功";
                httpRequest.post(url, this.formState).then(() => {
                    this.visible = false;
					this.getList();
                    message.success(msg);
                }).finally(()=>{
					this.btnLoading = false;
				});
            })
 
        },
		closeModal(){
			this.visible = false;
		}
    },
};
</script>
<style lang="less" scoped>
.line {
    width: 100%;
    margin: 20px 0;
    border-top: 1px solid #eee;
}
</style>
